
<template>
  <div class="life">
    <el-card class="box-card">
      <h2>博客公告</h2>
      <p class="top">{{ typingText }}</p>
      <el-skeleton :loading="isLoading" animated :count="6">
        <template slot="template">
          <div style="padding: 14px">
            <el-skeleton-item variant="h3" style="width: 50%" />
            <div
              style="
                display: flex;
                align-items: center;
                justify-items: space-between;
                margin-top: 16px;
                height: 16px;
              "
            >
              <el-skeleton-item variant="text" style="margin-right: 16px" />
            </div>
          </div>
        </template>
        <div class="block">
          <el-timeline>
            <el-timeline-item
              v-for="item in talkList"
              :key="item.id"
              :timestamp="formatTime(item.createTime)"
              placement="top"
              
            >
            <div class="pop-with-border">
                <h4 style="font-size: 15px;">
                  <svg class="icon huiyuan" aria-hidden="true">
                    <use xlink:href="#icon-gonggao"></use>
                  </svg>
                  {{ item.createPe }}：
                </h4>

                <p class="talkimg" v-if="item.talkImage">
                  <img :src="item.talkImage" alt="" />
                </p>
                <p class="talkimg" v-if="item.talkTitle">
                  {{ item.talkTitle }}
                </p>
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-skeleton>
    </el-card>
  </div>
</template>
<script>
import { getTalkList } from "../api/talk.js";
export default {
  data() {
    //选项 / 数据
    return {
      isLoading: true,
      text: "荣耀的背后刻着一道孤独",
      typingText: "",
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        status: 0,
      },
      talkList: [],
      hasMore: true,
    };
  },
  mounted() {
    this.typeText();
  },
  methods: {
    typeText() {
      let index = 0;
      const typingInterval = setInterval(() => {
        if (index < this.text.length) {
          this.typingText += this.text.charAt(index);
          index++;
        } else {
          clearInterval(typingInterval);
        }
      }, 100); // 每个字符显示间隔时间（单位：毫秒）
    },
    getList() {
      getTalkList(this.queryParams).then((res) => {
        //console.log(res.rows)
        this.talkList = res.rows;
        setTimeout(() => {
          this.isLoading = false;
        }, 2000);
      });
    },
    formatTime(time) {
      const date = new Date(time);
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      return `${year}年${month}月${day}日`;
    },
  },

  components: {
    //定义组件
  },
  created() {
    //生命周期函数
    this.getList();
  },
};
</script>

<style lang="less" scoped>
.talkimg {
  display: flex;
  align-items: center;
  color:#e69328;
  text-decoration: underline;
}

.talkimg img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
}

.talkimg .talkTitle {
  margin-left: 10px;
}

.pop-with-border {
  margin: 30px;
  width: 85%;
  padding: 10px;
  // background: rgb(219, 48, 48);
  border-radius: 8px;
  position: relative;
  border: 2px solid #ddd;
  filter: drop-shadow(0 0 5px rgb(238, 232, 232));
}
.pop-with-border:before,
.pop-with-border:after {
  top: -8px;
  border: 8px solid transparent;
  border-top: 0;
  border-bottom-color: rgb(238, 232, 232);
  content: "";
  display: block;
  width: 0;
  height: 0;
  left: 16px;
  overflow: hidden;
  position: absolute;
  z-index: 101;
}
.pop-with-border:before {
  top: -9px;
  border-bottom-color: #ddd;
  z-index: 99;
}
.pop-with-border p {
  padding: 10px 20px;
}

.life {
  height: 100%;
  background: rgb(194, 194, 194);
  border-radius: 15px;
  h2 {
    text-align: center;
    font-size: 25px;
    color: pink;
    margin-bottom: 15px;
    font-weight: bold;
  }
  p.top {
    text-align: center;
    font-size: 20px;
  }

  .block {
    span {
      text-align: center;
      margin-bottom: 15px;
    }
  }
}
.pop-with-border .talkimg img {
  max-width: 100%; /* 图片最大宽度为父元素宽度的百分之百 */
  height: auto; /* 根据宽度等比例缩放高度 */
  border-radius: 10px; /* 设置圆角 */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  /* 添加其他样式... */
}

.el-timeline-item /deep/ .el-timeline-item__timestamp.is-top {
  margin-bottom: 8px;
  padding-top: 4px;
  font-size: 18px;
  // color: #0bbd87;
}
.el-timeline-item /deep/ .el-timeline-item__node--normal {
  left: -1px;
  width: 18px;
  height: 18px;
  background: #0bbd87;
}
.el-timeline-item /deep/ .el-timeline-item__tail {
  position: absolute;
  left: 7px;
  height: 100%;
  border-left: 2px solid #e4e7ed;
}
</style>

